<template>
    <div>
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <li v-for="item in list" :key="item" :title="item"></li>
        </van-list>
    </div>
</template>

<script>
import { List } from 'vant';
export default {
    name: 'vantList',
    components:{
        [List.name]:List
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
        };
    },

    mounted() {
        
    },

    methods: {
        onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
            for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
            }
            
            // 加载状态结束
            this.loading = false;

            // 数据全部加载完成
            if (this.list.length >= 40) {
            this.finished = true;
            }
        }, 1000);
        },
    },
};
</script>

<style lang="scss" scoped>

</style>